<template>
  <div>
    <!--输入框-->
    <div class="input">
      <el-input v-model="keyword"
                placeholder="请输入标题"
                style="width:200px"
                clearable
                size="large"
      />
      <el-button type="info" size="large"  class="s" @click="search">搜索</el-button>
    </div>

    <el-table :data="postList" style="width: 100%" @row-click="handle" >
      <el-table-column prop="userName" label="用户" width="180" />
      <el-table-column prop="title" label="标题" width="300" />
      <el-table-column prop="text" label="内容" />
      <el-table-column label="操作" width="360">
        <template #default="scope">
          <el-button
              size="small"
              type="danger"
              @click.stop="deletePost(scope.row.id)">删除
          </el-button>

        </template>
      </el-table-column>


    </el-table>

    <!--      评论列表-->
    <el-dialog
        v-model="dialogVisible"
        title="评论列表"
        width="1200"
    >
      <el-table :data="commentList" style="width: 100%" empty-text="暂无评论">
        <el-table-column fixed prop="userName" label="评论人" width="150" />
        <el-table-column prop="text" label="评论内容" width="500" />
        <el-table-column prop="time" label="评论时间" width="250" />
        <el-table-column fixed="right" label="操作" >
          <template #default="scope">
            <el-button link type="danger" size="small" @click="deleteComment(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <div class="dialog-footer">
        </div>
      </template>
    </el-dialog>

    <!--分页-->
    <Pagination :currentPage="currentPage" :pageSize="pageSize" :total="total"
                :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange"></Pagination>


  </div>
</template>

<script>
import Pagination from '@/components/PaginationNew.vue'
import API from '@/api/communitation'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      postList: [],
      commentList:[],
      dialogVisible:false,
      keyword:'',

      //帖子总页面初始
      currentPage:1,
      pageSize:10,
      total:0

    }
  },
  mounted() {
    this.listPost()
  },
  methods:{
    handleSizeChange(val){
      this.pageSize=val
      this.listPost()
    },
    handleCurrentChange(val){
      this.currentPage=val
      this.listPost()
    },

      //搜索帖子
    search(){
      let token=localStorage.getItem('token')
      let param={
        title:this.keyword
      }
      API.listCommunication(param,token).then(res=>{
        console.log(res)
        if(res.data.code==='0'){
          this.postList=res.data.content.records
        }
      }).catch(err=>{
        console.log(err)
      })
    },

    //删除
    deletePost(id){
      let token =localStorage.getItem('token')
      API.deleteCommunication({
        id:id
      },token).then(res=>{
        if(res.data.code==='0'){
          this.$message.success('删除成功')
          this.listPost()
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    //删除评论
    deleteComment(id){
      let token=localStorage.getItem('token')
      API.deleteComent({
        id:id
      },token).then(res=>{
        if(res.data.code==='0'){
          this.$message.success('评论删除成功')
          let communicationId=localStorage.getItem('communicationId')
          this.listComment({
            communicationId:communicationId
          },token)
        }
      }).catch(error=>{
        console.log(error)
      })
    },

    //查询评论
    listComment(param,token){
      API.queryComentList(param,token).then(res=>{
        this.commentList=res.data.content.records
      }).catch(err=>{
        console.log(err)
      })
    },

    //点击行查看帖子对应评论
  handle(row){
    this.dialogVisible = true
    let token=localStorage.getItem('token')
    localStorage.setItem('communicationId',row.id)
    this.listComment({
      communicationId:row.id
    },token)
},
    //查询所有帖子
    listPost(){
      let token=localStorage.getItem('token')
      let param={
        pageNumber:this.currentPage,
        pageSize:this.pageSize
      }
      API.listCommunication(param,token).then(res=>{
        if(res.data.code==='0'){
          this.postList=res.data.content.records
          this.total = res.data.content.total
          console.log(this.postList)
        }
      }).catch(err=>{
        console.log(err)
      })
    },
  }
}
</script>

<style scoped>
.input{
  padding-top: 5px;
}
.f{
  text-align: center;
}
.transfeLayout{
  margin-left: 120px;
  margin-bottom: 25px;

}

.transfeLayout >>> .el-transfer-panel {
  width:300px;
}
.transfeTitle{
  width: 120px;
  height: 0px;
  padding-left: 12px;
  margin-bottom: 0px;
}
.exam-list {
  width: 100%;
}
.exam-list .col2-cell-style {
  color: #409EFF;
  cursor: pointer;
}
 .s{
   margin-left: 15px;
 }
  .f{
    margin-top: 15px;
  }

</style>